<template>
<!--  <Cell :title="items.schoolName" size="large" title-style="font-size:20px;font-weight: lighter;" :to="{name: 'about'}"/>-->
<!--  <swipe class="my-swipe" :autoplay="3000" lazy-render>-->
<!--    <swipe-item class="my-swipe-item" v-for="image in images" :key="image">-->
<!--      <img  :src="image" />-->
<!--    </swipe-item>-->
<!--  </swipe>-->
  <NavBar style="height: 50px">
    <template #title>
      <Image
          width="170"
          height="55"
          :src="image"
          :show-loading="false"
      />
    </template>
  </NavBar>
  <div>
    <NoticeBar v-for="(item, index) in news" :key="index" scrollable left-icon="volume-o" :text="item.news"/>
  </div>
  <swipe class="my-swipe" :autoplay="3000" lazy-render>
    <swipe-item class="my-swipe-item" v-for="image in images" :key="image">
      <img  :src="image" />
    </swipe-item>
  </swipe>
  <grid column-num="4" v-show="role !== 3">
    <grid-item icon="/src/assets/images/news.png"  text="校园动态" :to="{name: 'news'}" />
    <grid-item icon="/src/assets/images/homework.png" text="作业" :to="{name: 'homework'}" />
    <grid-item icon="/src/assets/images/scores.png" text="成绩" :to="{name: 'scores'}" />
    <grid-item icon="/src/assets/images/attend.png" text="考勤" :to="{name: 'attend'}" />
    <grid-item icon="/src/assets/images/rewardpunished.png" text="奖罚" :to="{name: 'rewardpunished'}" />
    <grid-item icon="/src/assets/images/monitor.png" text="监控" :to="{name: 'monitor'}" />
    <grid-item icon="/src/assets/images/activity.png" text="学生活动" :to="{name: 'activity'}" />
    <grid-item icon="/src/assets/images/evaluate.png" text="学生评价" :to="{name: 'evaluate'}" />
  </grid>
  <grid column-num="3" v-show="role === 3">
    <grid-item icon="/src/assets/images/news.png"  text="校园动态" :to="{name: 'news'}" />
    <grid-item icon="/src/assets/images/homework.png" text="作业" :to="{name: 'homework'}" />
    <grid-item icon="/src/assets/images/scores.png" text="成绩" :to="{name: 'scores'}" />
  </grid>
</template>

<script setup name="School">
import {Cell, Swipe, SwipeItem, Grid, GridItem, NavBar, Image, NoticeBar} from 'vant';
import { useUserStore } from '@/stores/user';

import {useRouter} from "vue-router";
import request from "@/utils/request";
import {computed, ref} from "vue";
import {getOssPrefix} from "@/v-api/properties";
import {Local} from "@/utils/storage";
const router = useRouter();
const schoolId = 1;
const items = ref([]);
const picture = ref([])
const news = ref([])
const userStore = useUserStore();
const image = ref()
const role = Local.get('userInfo').role;

const images = computed(() => {
  return picture.value.map(item => {
    // 检查是否有 picture 属性，并且确保 picture 不为空
    if (item.picture) {
      // 添加 getOssPrefix() 到 item.picture
      return getOssPrefix() + item.picture;
    }
    // 如果没有 picture 属性，返回空字符串或者其他你认为合适的值
    return '';
  }).filter(picture => picture !== ''); // 过滤掉空字符串的项
});

request.post('school/1')
    .then(response => {
      items.value = response.data;
      picture.value = items.value.picture;
      news.value = items.value.news;
      image.value = getOssPrefix()+items.value.profile
      // console.log(image);
    })
    .catch(error => {
      // console.error(error);
    });
</script>

<style>
.my-swipe-item {
  height: 150px;
}
.my-swipe-item img{
  width: 100%;
  height: 100%;
}

</style>
